<template>
	<view class="index">
		<!-- #ifdef H5 -->
		<YouRan-UI-WeiXinNei-TiShi></YouRan-UI-WeiXinNei-TiShi>
		<!-- #endif -->
		<template v-if="JSON.stringify(QieHuanKa_PeiZhi) != '{}'">
			<template v-if="QieHuanKa_PeiZhi.KaiQi">
				<scroll-view
					style="position: fixed;top: 0;left: 0;z-index: 999999;text-align: center;"
					class="YouRan-UI-XuanXiangKa-1"
					scroll-x="true">
					<view
						v-if="QieHuanKa_PeiZhi.LieBiao[0].KaiQi"
						@click="DianJi_QieHuanKa(1)"
						:class="QieHuanKa == 1 ? ' Zt-YuanSe' : ' Zt-ZhanWeiSe'"
						class="XunHuan H3 H3-Line">{{QieHuanKa_PeiZhi.LieBiao[0].BiaoTi}}</view>
					<view
						v-if="QieHuanKa_PeiZhi.LieBiao[1].KaiQi"
						@click="DianJi_QieHuanKa(2)"
						:class="QieHuanKa == 2 ? ' Zt-YuanSe' : ' Zt-ZhanWeiSe'"
						class="XunHuan H3 H3-Line">{{QieHuanKa_PeiZhi.LieBiao[1].BiaoTi}}</view>
					<view
						v-if="QieHuanKa_PeiZhi.LieBiao[2].KaiQi"
						@click="DianJi_QieHuanKa(3)"
						:class="QieHuanKa == 3 ? ' Zt-YuanSe' : ' Zt-ZhanWeiSe'"
						class="XunHuan H3 H3-Line">{{QieHuanKa_PeiZhi.LieBiao[2].BiaoTi}}</view>
				</scroll-view>
				<view style="padding-top: 82rpx;"></view>
			</template>
		</template>
		
		
		<template v-if="QieHuanKa == 1">
			<!-- 悠然-UI-DIY - 组件 -->
			<YouRan-UI-DIY v-if="YouRan_UI_DIY_ZhuangTai" :PeiZhi_WenJian="PeiZhi_WenJian"></YouRan-UI-DIY>
		</template>
		
		<template v-if="QieHuanKa == 2">
			<template v-if="CaiDan_LieBiao_ZhuangTai == 'YouShuJu'">
				<template v-for="item in CaiDan_LieBiao">
					<view class="YouRan-UI-FenGe-1-BiaoTi-1 Flex">
						<view class="Zuo Flex">
							<view class="Xian"></view>
							<view>{{item.gname}}</view>
						</view>
					</view>
					<view class="CaiDanLie">
						<view
							@click="$_TiaoZhuan('_Lie_XiaoZu/_Lie_XiaoZu?gid='+ZiLanMu.gid)"
							v-for="ZiLanMu in item.groups"
							class="XunHuan">
							<view class="Zuo" v-if="ZiLanMu.cover">
								<image :src="ZiLanMu.cover" mode="widthFix"></image>
							</view>
							<view class="You">
								<view class="Shang">
									<text class="ShangBiaoTi H2 H2-Line">{{ZiLanMu.gname}}</text>
									<text class="QiTa P">{{ZiLanMu.postCount}}帖子</text>
									<text class="QiTa P">{{ZiLanMu.commentCount}}回复</text>
								</view>
								<view class="Xia">
									{{ZiLanMu.description}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</template>
			<template v-if="CaiDan_LieBiao_ZhuangTai=='JiaZaiZhong'">
				<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
			</template>
			<template v-if="CaiDan_LieBiao_ZhuangTai=='WuShuJu'">
				<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
					<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
					<view class="Zt-ZhanWeiSe">暂无任何数据</view>
				</view>
			</template>
		</template>
		
		<template v-if="QieHuanKa == 3">
			<view class="YouRan-UI-LieBiao-8 Flex">
				<template v-if="HuaTi_LieBiao_ZhuangTai=='YouShuJu'">
					<view
						v-for="item in HuaTi_LieBiao"
						@click="$_TiaoZhuan('_Lie_HuaTi/_Lie_HuaTi?hid='+item.hid)"
						class="XunHuan">{{item.hname}}({{item.postCount}})</view>
				</template>
				<template v-if="HuaTi_LieBiao_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="HuaTi_LieBiao_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 25rpx 0;width: 100%;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QieHuanKa:1,
				QieHuanKa_PeiZhi:{},
				PeiZhi_WenJian:"FenLei.json",// [ ！很重要！] 请求哪个 Json 文件
				YouRan_UI_DIY_ZhuangTai:true,// YouRan-UI-DIY 组件的状态，用来重载
				CaiDan_LieBiao:[],
				CaiDan_LieBiao_ZhuangTai:"JiaZaiZhong",
				HuaTi_LieBiao:[],
				HuaTi_LieBiao_ZhuangTai:"JiaZaiZhong",
			}
		},
		onShow() {
			// 是否有消息
			this.$_ShiFou_You_XiaoXi()
		},
		onLoad() {
			this.QingQiu_BenYe_PeiZhi()
		},
		methods: {
			QingQiu_BenYe_PeiZhi(){
				uni.request({
					url:this.$_PeiZhi_WenJian() + "FenLei.json",
					method:'GET',
					success: (res) => {
						this.QieHuanKa_PeiZhi = res.data.QieHuanKa;
						this.QieHuanKa = res.data.QieHuanKa.ShouPing;
						this.QingQiu_XiaoZu_LieBiao();
						this.QingQiu_HuaTi_LieBiao();
					}
				})
			},
			// 请求小组列表
			QingQiu_XiaoZu_LieBiao(){
				this.$_QingQiu(
					"GET","/api/v2/group/tree",{},
					(res) => {
						this.CaiDan_LieBiao = res.data.data;
						if(this.CaiDan_LieBiao.length){
							this.CaiDan_LieBiao_ZhuangTai = "YouShuJu"
						}else{
							this.CaiDan_LieBiao_ZhuangTai = "WuShuJu"
						}
					}
				)
			},
			// 请求话题分类列表
			QingQiu_HuaTi_LieBiao(){
				let LeiXing = this.QieHuanKa_PeiZhi.LieBiao[2].ShaiXuan.PaiXu_LeiXing,
					ShuLiang = this.QieHuanKa_PeiZhi.LieBiao[2].ShaiXuan.ShuLiang;
				this.$_QingQiu(
					"GET","/api/v2/hashtag/list",
					{
						"orderType":LeiXing,
						"whitelistKeys":"hid,hname,postCount",
						"pageSize":ShuLiang
					},
					(res) => {
						if(res.data.code == 0){
							this.HuaTi_LieBiao = res.data.data.list;
							if(this.HuaTi_LieBiao.length){
								this.HuaTi_LieBiao_ZhuangTai = "YouShuJu"
							}else{
								this.HuaTi_LieBiao_ZhuangTai = "WuShuJu"
							}
						}else{
							this.HuaTi_LieBiao_ZhuangTai = "WuShuJu"
						}
					}
				)
			},
			DianJi_QieHuanKa(e){
				this.QieHuanKa = e;
				if(e==2){
					this.QingQiu_XiaoZu_LieBiao();
				}
				if(e==3){
					this.QingQiu_HuaTi_LieBiao();
				}
				if(e==1){
					this.QingQiu_BenYe_PeiZhi()
				}
			},
		}
	}
</script>

<style lang="scss">
.index{
	.YouRan-UI-FenGe-1-BiaoTi-1{
		padding: 25rpx;
		border-bottom: 1rpx solid $BeiJingSe;
		.Zuo{
			.Xian{
				background: $LanSe;
			}
		}
	}
	.CaiDanLie{
		.XunHuan{
			display: flex;
			border-bottom: 1rpx solid $BeiJingSe;
			padding: 25rpx;
			.Zuo{
				width: 90rpx;
				height: 90rpx;
				overflow: hidden;
				border-radius: 100%;
				margin-right: 25rpx;
			}
			.You{
				flex: 1;
				.Shang{
					margin-top: 10rpx;
					display: flex;
					align-items: flex-end;
					.QiTa{
						padding-left: 15rpx;
					}
				}
				.Xia{
					margin-top: 15rpx;
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
}
</style>